// App -> A -> B

import { createContext, useContext } from "react"

// 1. createContext方法创建一个上下文对象

const MsgContext = createContext()
const MsgContext233 = createContext()

function A() {
  return (
    <div>
      this is A component
      <B />
    </div>
  )
}

function B() {
  // 3. 在底层组件 通过useContext钩子函数使用数据
  const msg = useContext(MsgContext)
  const msg233 = useContext(MsgContext233)
  console.log(msg);
  console.log(msg233);

  return (
    <div>
      this is B compnent,{msg}
    </div>
  )
}

function App() {
  const msg233 = 'this is app msg233'
  const msg = 'this is app msg'
  return (
    <div>
      {/* 2. 在顶层组件 通过Provider组件提供数据 */}
      <MsgContext.Provider value={msg}>
        <MsgContext233.Provider value={msg233}>
          this is App
          <A />
        </MsgContext233.Provider>

      </MsgContext.Provider>
    </div>
  )
}

export default App